import { login } from '@/store/actions/login';
import { LockOutlined, UserOutlined, QqOutlined, WechatOutlined, WeiboCircleOutlined, UserAddOutlined, NumberOutlined } from '@ant-design/icons';
import { LoginForm, ProFormCheckbox, ProFormText, } from '@ant-design/pro-components';
import { Alert, message, Space, Tabs } from 'antd';
import { useState } from 'react';
import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
import style from './index.module.scss'
type LoginType = 'phone' | 'account' | 'register';
type LoginParams = {
    username?: string;
    password?: string;
    autoLogin?: boolean;
    type?: string;
}
export const Login = () => {
    const history = useHistory()
    const dispatch = useDispatch()
    const [loginType, setLoginType] = useState<LoginType>('account');
    const [msgState, setMsgState] = useState({
        msg: '',
        type: '',
    });
    const onFinishLogin = async (value: LoginParams) => {
        console.log(value, '111');
        // @ts-ignore
        await dispatch(login(value)).then(res => {
            if (res.code === '200') {
                // message.success('登录成功');
                // message.success(`登录成功,正在跳转首页`, 2, () => {
                // });
                setMsgState({
                    msg: '登录成功,正在跳转首页...',
                    type: 'success',
                })
                setTimeout(() => {
                    history.push('/home')
                }, 2000);
            } else {
                setMsgState({
                    msg: res.msg,
                    type: 'error'
                })
            }
        })
        // console.log(res, 'res');

        // await loginess(value).then(res => {
        //     console.log(res, 'resres');
        //     message.success(`登录成功,正在跳转首页`, 2, () => {
        //         history.push('/home')
        //     });
        // }).catch(err => {
        //     setMsgState({
        //         msg: err.message,
        //         type: err.status,
        //     });
        // })
    }
    const LoginError: React.FC<{ content: string; }> = ({ content }) => (
        <Alert style={{ marginBottom: 24, }} message={content} type='error' showIcon />
    );
    const LoginSuccsee: React.FC<{ content: string; }> = ({ content }) => (
        <Alert style={{ marginBottom: 24, }} message={content} type='success' showIcon />
    );
    return (
        <div style={{ backgroundColor: 'white' }} className={style.root}>
            <LoginForm
                logo='https://dgimg-1306779837.cos.ap-shanghai.myqcloud.com/20220502/9AJocUPc.ico'
                title="Zg's 订单系统"
                subTitle="企业级订单管理解决方案"
                // 登录按钮昵称
                actions={
                    <Space>
                        其他登录方式：
                        <QqOutlined className='icon' />
                        <WechatOutlined className='icon' />
                        <WeiboCircleOutlined className='icon' />
                    </Space>
                }
                onFinish={async (value) => { await onFinishLogin(value); }}>
                <Tabs activeKey={loginType} onChange={(activeKey) => setLoginType(activeKey as LoginType)}>
                    <Tabs.TabPane key={'account'} tab={'账号密码登录'} />
                    <Tabs.TabPane key={'phone'} tab={'手机号登录'} disabled />
                </Tabs>

                {msgState.type === 'error' && (
                    <LoginError content={msgState.msg} />
                )}
                {msgState.type === 'success' && (
                    <LoginSuccsee content={msgState.msg} />
                )}
                {/* 账号密码登录 */}
                {loginType === 'account' && (
                    <>
                        <ProFormText
                            name="account"
                            fieldProps={{
                                size: 'large',
                                prefix: <UserOutlined className={'prefixIcon'} />,
                            }}
                            placeholder='默认：admin'
                            rules={[
                                {
                                    required: true,
                                    message: '请输入账号',
                                },
                            ]}
                        />
                        <ProFormText.Password
                            name="password"
                            fieldProps={{
                                size: 'large',
                                prefix: <LockOutlined className={'prefixIcon'} />,
                            }}
                            placeholder='默认：123456'
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码',
                                },
                            ]}
                        />
                    </>
                )}
                {/* 手机号登录 */}
                {/* {loginType === 'phone' && (
                    <>
                        <ProFormText
                            fieldProps={{
                                size: 'large',
                                prefix: <MobileOutlined className={'prefixIcon'} />,
                            }}
                            name="mobile"
                            placeholder={'手机号'}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入手机号！',
                                },
                                {
                                    pattern: /^1\d{10}$/,
                                    message: '手机号格式错误！',
                                },
                            ]}
                        />
                        <ProFormCaptcha
                            fieldProps={{
                                size: 'large',
                                prefix: <LockOutlined className={'prefixIcon'} />,
                            }}
                            captchaProps={{
                                size: 'large',
                            }}
                            placeholder={'请输入验证码'}
                            captchaTextRender={(timing, count) => {
                                if (timing) {
                                    return `${count} ${'获取验证码'}`;
                                }
                                return '获取验证码';
                            }}
                            name="captcha"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入验证码！',
                                },
                            ]}
                            onGetCaptcha={async () => {
                                message.success('获取验证码成功！验证码为：1234');
                            }}
                        />
                    </>
                )} */}
                {/* 注册账号 */}
                {/* {loginType === 'register' && (
                    <>
                        <ProFormText
                            fieldProps={{
                                size: 'large',
                                prefix: <UserAddOutlined className={'prefixIcon'} />,
                            }}
                            name="mobile"
                            placeholder={'账号'}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入手机号！',
                                },
                                {
                                    pattern: /^1\d{10}$/,
                                    message: '手机号格式错误！',
                                },
                            ]}
                        />

                        <ProFormText.Password
                            name="password"
                            fieldProps={{
                                size: 'large',
                                prefix: <LockOutlined className={'prefixIcon'} />,
                            }}
                            placeholder='密码'
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码',
                                },
                            ]}
                        />
                        <ProFormText
                            name="account"
                            fieldProps={{
                                size: 'large',
                                prefix: <NumberOutlined className={'prefixIcon'} />,
                            }}
                            placeholder='邀请码'
                            rules={[
                                {
                                    required: true,
                                    message: '请输入邀请码',
                                },
                            ]}
                        />
                    </>
                )} */}
                <div>
                    <ProFormCheckbox noStyle name="rempw" >
                        记住密码
                    </ProFormCheckbox>
                    {/* <a style={{ float: 'left', }} onClick={() => {
                        setLoginType('register')
                    }}>注册账号 </a> */}
                    <a style={{ float: 'right', }}>忘记密码 </a>
                </div>
            </LoginForm>
        </div>
    );
};